<template>
	<view id="cook-index">
		<view class="" id="header">
			<u-search @click="navigateToSearch()" @custom="navigateToSearch" disabled=true font-size="28" placeholder="搜索"></u-search>
			<view class="top_nav">
				<u-tabs font-size="24" :list="listd" :is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="wrap">
			<view class="side_nav" style="position: fixed;">
				<view v-for="(item, index) in sideList" :key="index" @click="selectSide(index)" :class="{ 'active': index==activeColor}">
					{{item.name}}
				</view>
			</view>
			
			<view class="right_side">
				
				<scroll-view scroll-y="true" :style="{height: scrollViewHeight + 'px'}" @scrolltolower="getListByClassify" style="">
					<view class="content item">
					
						
						<u-grid :col="3">
							<u-grid-item class="content_item " v-for="(item, index) in contentItem" :key="index"
							@click="navigateToDetail(item.id)">
								<view class="img">
									<image :src="item.pic"></image>
								</view>
								<view class="text">
									<view class="u-line-1">{{item.name}}</view>
									<view class="time">
										{{item.cookingtime}}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
							
							
					
					</view>
					<u-loadmore :status="status" :load-text="loadText"  @loadmore="loadMore"/>
				</scroll-view>
				
			</view>
			
		</view>
		
		
		<!-- <u-tabs :list="sideList" :is-scroll="true" :current="current" @change="change"></u-tabs> -->
	</view>
</template>

<script>
	const baseUrl = "https://way.jd.com/jisuapi/"
	const myKey = "d841f29c61d4b1178380910774222055";
	const winHeight = uni.getSystemInfoSync().windowHeight;
	export default {
			data() {
				return {
					sideList: [],
					listd: [],
					contentItem: [],
					current: 0,
					activeColor: 0,
					allList:[],
					status: 'loadmore',
					page: 0,
					loadText: {
						loadmore: '努力加载中...',
						loading: '努力加载中...',
						nomore: '没有数据'
					},
					currentClassify: 0,
					scrollViewHeight: 300
				}
			},
			
			mounted() {
				let that = this;
				uni.getStorage({
				    key: 'recipe_class',
				    success: function (res) {
				        console.log("res.data",res.data);
						
						if(!res.data){
							that.getFoodClassify();
						}else{
							let data = res.data.data;
							that.sideList = data.result.result;
							that.listd = data.result.result[0].list;
							that.currentClassify = that.listd[0].classid;
							that.getListByClassify()
						}
				    },fail: function (err){
						that.getFoodClassify();
					}
				});
			},
			
			onLoad() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect(data => {
					console.log("winHeight",winHeight)
					console.log("data.height",data.height)
				  this.scrollViewHeight = winHeight - data.height*2 - 60*2
				}).exec();
			},
			
			onReady() {
				// setTimeout(()=>{
					
				// },100)
				
			},
			
			
					
			methods: {
				
				initState() {
					this.page = 0;
					this.contentItem = [];
					this.status = 'loadmore';
				},
		
				change(index) {
					this.initState();
					console.log(this.listd[index].classid)
					this.currentClassify = this.listd[index].classid;
					this.getListByClassify();
					this.current = index;
				},
				
				/**
				 * @param {Object} index
				 * 选择侧边导航
				 */
				selectSide(index) {
					this.initState();
					this.activeColor = index;
					this.listd = this.sideList[index].list
					this.currentClassify = this.listd[0].classid;
					this.getListByClassify()
				},
				
				/**
				 * 获取分类
				 */
				getFoodClassify() {
					let that = this;
					uni.request({
						url: baseUrl+"recipe_class?appkey="+myKey,
						method:"get",
						success(data) {
							console.log(data.data)
							if(data.data.result){
								uni.setStorage({
								    key: 'recipe_class',
								    data: data,
								    success: function () {
								        console.log('success');
								    }
								});
								that.sideList = data.data.result.result;
								that.listd = data.data.result.result[0].list;
								that.currentClassify = that.listd[0].classid;
								that.getListByClassify()
							}
						},
						error(data) {
							
						}
					})
				},
				
				/**
				 * 获取列表
				 */
				getListByClassify() {
					let classify = this.currentClassify;
					let that = this;
					if(that.status=='loading') return;
					uni.request({
						url: baseUrl+"byclass?appkey="+myKey+"&start="+that.page*20+"&num="+(that.page*20+20)+"&classid="+classify,
						method:"get",
						success(data) {
							// console.log(data.data)
							if(data.data){
								let result = data.data.result.result;
								
								if(that.contentItem.length>=result.total) {
									setTimeout(()=>{
										that.status = 'nomore' 
									},1000)
									return ;
								}
								
								that.status = 'loading';
								that.page = ++ that.page;
								setTimeout(() => {
									that.contentItem = that.contentItem.concat(result.list);
									// that.status = 'loading';
									that.status = 'loadmore';
								}, 500)
								
							}
						
						},
						error(data) {
							
						}
					})
				},
				
				/**
				 * @param {Object} id
				 * 到详情
				 */
				navigateToDetail(id) {
					uni.navigateTo({
						url: "/cook/detail/index?id="+id
					})
				},
				
				/**
				 * 到搜索
				 */
				navigateToSearch() {
					uni.navigateTo({
						url: "/cook/search/index"
					})
				},
				
				
				// onreachBottom() {
				// 	// console.log('---');
				// 	console.log(Math.floor(this.allList.length/10))
				// 			if(this.page >= Math.floor(this.allList.length/10)) {
				// 				setTimeout(()=>{
				// 					this.status = 'nomore' 
				// 				},1000)
				// 				return ;
				// 			}
				// 			this.status = 'loading';
				// 			this.page = ++ this.page;
				// 			setTimeout(() => {
				// 				// this.contentItem = this.contentItem.concat(this.allList.splice(0,10));
				// 				if(this.page >= 3) this.status = 'nomore';
				// 				else this.status = 'loading';
				// 			}, 500)
				// 		}
			}
		}
</script>

<style lang="scss" scoped>
	#cook-index{
		padding:30rpx 30rpx 0;
		.wrap{
			display: flex;
			height: 100%;
			.side_nav{
				position: fixed;
				display: flex;
				flex-direction: column;
				width: 130rpx;
				view{
					padding:20rpx 10rpx;
					
				}
				
				.active{
					// background-color: #2979ff;
					color: #2979ff;
				}
			}
			
			
			.right_side{
				margin-left:130rpx;
				width: 550rpx;
				.top_nav{
					
				}
				
				.content{
					display: flex;
					justify-content: space-between;
					.content_item{
						.img{
							
							image{
								height:120rpx;
								width:120rpx;
								border-radius: 8rpx;
							}
						}
						
						.text{
							display: flex;
							flex-direction: column;
							font-size: 22rpx;
							width: 100%;
							text-align: center;
							
							.time{
								font-size: 22rpx;
								color: #999;
							}
						}
					}
					
				}
			}
			
			
		}
		
		.sticky {
		width: 750rpx;
		height: 120rpx;
		padding: 24rpx;
	}
	}
</style>
